<style>
  .appoint-drawer-footer{
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .show-info{
    font-size: 16px;
    margin-left: 60px;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: left
  }
  .show-info span:first-child {
    display: inline-block;
    width: 120px;
    margin-right: 15px;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      :closable="false"
      :title="title"
      @on-close="cancel"
      width="40%">
      <div class="show-info">
        <Row style="margin-bottom: 60px">
          <Col span="12">
            <span>创建日期：</span>
            <span>{{row.ctime ? row.ctime : '-'}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>客户姓名：</span>
            <span>{{row.uname}}</span>
          </Col>
          <Col span='12'>
            <span>客户电话：</span>
            <span>{{row.tel}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>云销售姓名：</span>
            <span>{{row.coludname ? row.coludname : '-'}}</span>
          </Col>
          <Col span='12'>
            <span>云销售电话：</span>
            <span>{{row.coludtel}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>推荐销售：</span>
            <span>{{row.pname ? row.pname : '-'}}</span>
          </Col>
          <Col span='12'>
            <span>接待销售：</span>
            <span>{{row.mname ? row.mname : '-'}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>状态：</span>
            <span>{{row.state === '0' ? '未预约' : row.state === '1' ? '已预约' : row.state === '2' ? '未到访' : row.state === '3' ? '已到店' : row.state === '4' ? '已签约' :  row.state === '5' ? '已退款' : '-'}}</span>
          </Col>
          <Col span='12'>
            <span>结算方式：</span>
            <span>{{row.ttype && row.ttype === '1' ? '到店结算' : row.ttype === '2' ? '成交结算' : '点击结算'}}</span>
          </Col>
        </Row>
        <Row v-show="row.state !== '0'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>性别：</span>
            <span>{{row.sex === 0 ? '女' : row.sex === 1 ? '男' : '-'}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>意向商品：</span>
            <span>{{row.gname ? row.ganme : '-'}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>客户意向度：</span>
            <span>{{row.want === '3' ? '意向度很强烈' : row.want === '2' ? '意向度较强' : row.want === '1' ? '意向度一般' : row.want === '0' ? '意向度不强' : '-'}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>预到店时间：</span>
            <span>{{row.appointime ? this.$moment(row.appointime).format('YYYY-MM-DD HH:mm:ss') : '-'}}</span>
          </Col>
        </Row>
      </div>
      <Form
        ref="appointDrawer"
        :model="form"
        style="width: 100%"
        :rules="rules"
        :label-width="50">
        <div>
          <div style="margin-left: 60px; font-size: 16px; width: 120px">新预到店时间：</div>
          <FormItem prop="appointime" style="width: 460px; margin-left: 140px; margin-top: -23px">
            <Row>
              <Col span="11">
                <FormItem prop="date">
                  <DatePicker v-model="form.date" type="date" placeholder="请选择日期"></DatePicker>
                </FormItem>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <FormItem prop="time">
                  <TimePicker v-model="form.time" type="time" placeholder="请选择时间"></TimePicker>
                </FormItem>
              </Col>
            </Row>
          </FormItem>
        </div>
        <div style="margin-left: 60px; font-size: 16px; width: 120px">接待销售：</div>
          <FormItem prop="puid" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.puid">
              <Option v-for="item in nameList" :value="item.id.toString()" :key="item.id">
                {{ item.uname }}
              </Option>
            </Select>
          </FormItem>
        <div>
          <div style="margin-left: 60px; font-size: 16px; width: 120px">备注：</div>
          <FormItem prop="remarks" style="width: 500px; margin-left: 140px; margin-top: -23px">
            <Input v-model="row.remarks" :rows="4" type="textarea" placeholder="请输入备注信息" />
          </FormItem>
        </div>
      </Form>
      <div class="appoint-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">取消</Button>
        <Button type="primary" @click="handleSubmit">确认</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'AppointDrawer',
  props: {
    row: null,
    detailTitle: ''
  },
  data () {
    return {
      title: '',
      loading: true,
      form: {
        appointime: '',
        remarks: '',
        puid: '',
        date: '',
        time: ''
      },
      rules: {
        puid: [
          {
            required: true,
            message: '请选择接待销售',
            trigger: 'change'
          }
        ],
        date: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change',
            type: 'date'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change',
            type: 'string'
          }
        ]
      }
    }
  },
  updated () {
    this.title = '客户详情页'
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      modalState: state => state.modal.appointDrawerState,
      nameList: state => state.arrive.nameList
    })
  },
  methods: {
    ...mapActions(['updateAppointDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.appointDrawer.validate(valid => {
        if (!valid) {
          return this.changeLoading()
        }

        this.$emit('appoint-valid', {
          id: this.row.id,
          appointime: this.form.date ? `${this.$moment(this.form.date, this.$moment.ISO_8601).format('YYYY-MM-DD')} ${this.form.time}` : '',
          remarks: this.row.remarks,
          puid: this.form.puid
        })
      })
    },
    cancel () {
      this.updateAppointDrawerState(false)
      this.$refs['appointDrawer'].resetFields()
    }
  }
}
</script>
